<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件，练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: rgb(87, 167, 236);
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            left: 100px;
            top: 100px;
            position:absolute;
            line-height: 100px;
        }
    </style>
</head>
<body style="height: 1000px;">
    <div id="box1"></div>
    <div id="box2">&nbsp;&nbsp;j增速,k减速</div>
</body>
</html>
<script>
    /*
        使 div 可以根据不同的方向键，向不同的方向移动
            按左键 ，向左移
            按右键 ，向右移
            按上键 ，向上移
            按下键 ，向下移

        同理使 box2 可以上下左右移动
    */
   
    // 定义一个变量来控制移动速度
    var speed = 100;
    // 获取box1 
    var box1 = document.getElementById("box1");
    document.onkeydown = function(event){

        // 解决浏览器兼容性问题
        event = event || window.event;

        // 按下 j 增加速度 k 减慢速度
        switch(event.keyCode){
            // j 加速
            case 74:speed=speed+10;
            break;
            // k 减速
            case 75:speed-=10;
                // 限制最低速度
                if(speed <= 10){
                    speed=10;
                }
            break;
        }

        // 判断按下的是哪个键
        switch(event.keyCode){
            // 是否按下，上键
            case 38:
                box1.style.top = box1.offsetTop - speed +"px";
                break;
            // 是否按下，下键
            case 40:
                box1.style.top = box1.offsetTop + speed +"px";
                break;
            // 是否按下，左键
            break;
            case 37:
                box1.style.left = box1.offsetLeft - speed +"px";
                break;
            // 是否按下，右键
            break;
            case 39:
                box1.style.left = box1.offsetLeft + speed +"px";
                break;
            break;
        }
        return false;
    };


    // 定义一个变量来控制移动速度
    var speed02 = 100;
    // 获取box2
    var box2 = document.getElementById("box2");
    document.body.onkeydown = function(event){

        // 解决浏览器兼容性问题
        event = event || window.event;

        // 按下 j 增加速度 k 减慢速度
        switch(event.keyCode){
            // j 加速
            case 74:speed02=speed02+10;
            break;
            // k 减速
            case 75:speed02-=10;
                // 限制最低速度
                if(speed02 <= 10){
                    speed02=10;
                }
            break;
        }

        // 判断按下的是哪个键
        switch(event.keyCode){
            // 是否按下，上键
            case 87:
            box2.style.top = box2.offsetTop - speed02 +"px";
                break;
            // 是否按下，下键
            case 83:
            box2.style.top = box2.offsetTop + speed02 +"px";
                break;
            // 是否按下，左键
            case 65:
            box2.style.left = box2.offsetLeft - speed02 +"px";
                break;
            // 是否按下，右键
            case 68:
            box2.style.left = box2.offsetLeft + speed02 +"px";
                break;
        }
        return false;
    };
</script>